<template>
<div class="t-button-box">
    <!-- 节流 -->
    <template v-if="debounce">
        <button class="t-button" @click="submit" :class="allClass">
            <slot></slot>
        </button>
    </template>
    <!-- 不节流 -->
    <button v-else class="t-button" @click="submit" :class="allClass">
        <slot></slot>
    </button>
    <!-- 右侧是否有分割竖线 -->
    <span v-if="interval" class="table-but-delimiter">|</span>
</div>
</template>

<script>
export default {
    props: {
        // 类型，默认text，可以选link
        type: {
            type: String,
            default: 'text',
        },
        // 主题，默认default白色，可选primary，warning,error
        theme: {
            type: String,
            default: 'default',
        },
        // 是否节流
        debounce: {
            type: Boolean,
            default: false,
        },
        // 不可点击
        disabled: {
            type: Boolean,
            default: false,
        },
        // 是否右侧有竖线
        interval: {
            type: Boolean,
            default: false,
        }
    },
    computed: {
        allClass() {
            return [
                `t-button-${this.type}`,
                `t-button-theme-${this.theme}`,
                this.disabled ? 't-button-disabled' : '',
            ]
        },
    },
    methods: {
        submit() {
            if (!this.disabled) {
                this.$emit('on-click')
            }
        }
    }
}
</script>

<style lang="scss">
.t-button-box {
    display: inline-block;

    .t-button {
        text-align: center;
        background-color: transparent;
        display: inline-block;
        border: none;
        cursor: pointer;
        outline: none;
        transition: all 0s 0.2s linear;

        &-link {
            text-decoration: underline;
        }

        &-theme {
            &-default {
                color: #fff;
            }

            &-primary {
                color: $info-color;
            }

            &-warning {
                color: $warning-color;
            }

            &-error {
                color: $error-color;
            }

            &-success {
                color: $success-color;
            }
        }

        &-disabled {
            color: #c5c8ce;
            cursor: not-allowed;
        }

        &-disabled:hover {
            opacity: 1 !important;
        }
    }

    .t-button:hover {
        opacity: 0.8;
    }

    .t-button:focus {
        border: none;
    }

    //表格内button之间的分隔符
    .table-but-delimiter {
        margin: 0px 8px;
    }
}
</style>
